<template>
	<view>
		<view style="position: absolute;width: 100vw;height: 100vh;top:0;left: 0;" @click="colseAll()" :style=" domInfo[0].status ? '' : 'display:none' "></view>
		<view class="gt-drop-list input-line" style='position: relative;cursor: pointer;' ref="dropList">
			
			<view class="row" @click="changeDomInfo()">
				<view class="col-auto mr-10" :class=" name ? '' : 'c-secondary'">{{ name || placeholder }}</view>
				<view class="iconfont icon-unfold"></view>
			</view>
			<view class="drop-list-positon" v-for="(items,index) in listArray" :key="index"
				:style="'top:'+domInfo[index].top+'px;left:'+domInfo[index].left+'px;'">
				<view class="drop-list-content relative"
					:class="domInfo[index].status ? 'show-drop-list' : 'hide-drop-list'"
					:style="'width:'+domInfo[index].width+'px'">
					<view v-if="index === 0" class="triangle-up"></view>
					<view v-else class="triangle-left"></view>
					<view style="overflow: hidden;">
						<view class="drop-list-row row " v-for="(row,rowIndex) in items" :key="rowIndex"
							:ref="'index'+row.key" 
							@click="selectRow(index,rowIndex)" @mousemove="domMove(index,rowIndex)">
							<view class="col-auto" :class="!row.key? 'c-secondary' : ''">{{row.val}}</view>
							<view v-if="parentKeyArr.indexOf(row.key) != -1">
								<text class="iconfont icon-right1 c-secondary" style="line-height: 44px;"></text>
								</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	
</template>

<script>
	export default {
		name: "gt-drop-list",
		model: {
			prop: 'value',
			event: 'change'
		},
		props: {
			value: {
				type: [Number, String],
				default: function() {
					return ''
				}
			},
			placeholder: {
				type: String,
				default: '请选择'
			},
			url: {
				type: String,
				default: function() {
					return '';
				}
			},
			
		},
		created() {},
		data() {
			return {
				name: '',
				domInfo: [{
						status: false,
						top: '',
						left: '',
						width: ''
					},
					{
						status: false,
						top: '',
						left: '',
						width: ''
					},
					{
						status: false,
						top: '',
						left: '',
						width: ''
					}
				],
				parentKeyArr: [],
				moveIndex:'',
				moveRowIndex:'',
			}
		},
		computed: {
			listArray() {
				var arr = [{
					key: '',
					val: this.placeholder
				}];
				for (var i in this.list) {
					let row = this.list[i];
					if (typeof row == 'object' && row.key !== undefined && row.val !== undefined) {
						if (!row.parent_key) {
							arr.push(row);
						}
						if (row.key === this.value) {
							this.name = row.val;
						}
						if (row.parent_key && this.parentKeyArr.indexOf(row.parent_key) == -1) {
							this.parentKeyArr.push(row.parent_key);
						}

					} else {
						arr.push({
							key: i,
							val: row
						});
						if (i === this.value) {
							this.name = row;
						}
					}
				}
				// if(this.type == 'parent'){
				// 	for(let i in arr){
				// 		let row = arr[i];
				// 		if(this.parentKeyArr.indexOf(row.key) === -1){
				// 			arr.splice(i,1);
				// 		}
				// 	}
				// }
				return [arr];
			}
		},
		methods: {
			changeDomInfo(index = 0, rowIndex = 0) {
				let domInfo = this.domInfo;
				let width = this.$refs.dropList.$el.offsetWidth;
				let top = 50;
				top += rowIndex * 44;
				let left = index == 0 ? 0 : index * width + 15;
				let obj = {
					status: true,
					// status: !domInfo[index].status,
					left: left,
					top: top,
					width: width,
				}
				domInfo[index] = obj;
				this.domInfo = [];
				this.domInfo = domInfo;
			},
			selectRow(index, rowIndex) {
				let key = this.listArray[index][rowIndex].key;
				if (this.parentKeyArr.indexOf(key) != -1 && this.type == 'default') {
					let arr = [];
					for (var i in this.list) {
						let row = this.list[i];
						if (row.parent_key == key) {
							arr.push(row);
						}
					}
					// console.log(this.$refs['index' + key][0].$el.offsetLeft);
					// console.log(this.$refs['index' + key][0].$el.offsetTop);
					this.listArray[1] = arr;
					this.changeDomInfo(index + 1, rowIndex);
				} else {
					// console.log(index);
					// console.log(key);
					this.$emit('change', key);
					if (!key) this.name = '';
					this.colseAll();
				}
			},
			colseAll(){
				let domInfo = this.domInfo;
				for (let i in domInfo) {
					domInfo[i].status = false;
				}
				this.domInfo = [];
				this.domInfo = domInfo;
				this.moveIndex = '';
				this.moveRowIndex = '';
			},
			domMove(index,rowIndex){
				if(this.moveIndex === index && this.moveRowIndex === rowIndex){
					return false;
				}
				this.moveIndex = index;
				this.moveRowIndex = rowIndex;
				let key = this.listArray[index][rowIndex].key;
				if (this.parentKeyArr.indexOf(key) != -1) {
					let arr = [];
					for (var i in this.list) {
						let row = this.list[i];
						if (row.parent_key == key) {
							arr.push(row);
						}
					}
					// console.log(this.$refs['index' + key][0].$el.offsetLeft);
					// console.log(this.$refs['index' + key][0].$el.offsetTop);
					this.listArray[1] = arr;
					this.changeDomInfo(index + 1, rowIndex);
				}else{
					let domInfo = this.domInfo;
					domInfo[index+1] = {
						status:false,
						with:0,
						top:0,
						left:0
					};
					// console.log(domInfo);
					this.domInfo = [];
					this.domInfo = domInfo;
				}
			}
		}
	}
</script>

<style>
	.drop-list-positon {
		position: absolute;
		z-index: 999;
	}

	.drop-list-content {
		max-height: 300px;
		background-color: white;
		box-shadow: 0 1px 5px 0 rgba(0, 0, 0, .3);
		border-radius: 3px;
		height: 0;
	}

	.drop-list-row {
		padding: 0 15px;
		line-height: 44px;
	}

	.drop-list-row:hover {
		background-color: #f5f5f5;
	}

	.show-drop-list {
		height: auto;
	}

	.hide-drop-list {
		height: 0;
		overflow: hidden;
	}

	.triangle-up {
		width: 0;
		height: 0;
		border-left: 6px solid transparent;
		border-right: 6px solid transparent;
		border-bottom: 12px solid #ffffff;
		position: absolute;
		left: calc( 50% - 6px );
		top: -10px;
		z-index: 9999;
		filter:drop-shadow(0px -1px rgba(0,0,0,.2))
	}

	.triangle-left {
		width: 0;
		height: 0;
		border-top: 5px solid transparent;
		border-right: 10px solid #ffffff;
		border-bottom: 5px solid transparent;
		position: absolute;
		left: -8px;
		top: 16px;
		z-index: 9999;
		filter:drop-shadow(-1px 0px rgba(0,0,0,.2))
	}
</style>
